<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 菜单 筛选区【列表】-->
      <el-form ref="form" label-width="80px" :inline="true" size="medium">
        <el-row>
          <el-col :span="12">
            <el-form-item>
              <el-input
                size="medium"
                placeholder="角色名称"
                v-model.trim="fromData.role_name"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                size="medium"
                plain
                @click="initData(true)"
              >
                搜索</el-button
              >
              <el-button size="medium" @click="initData(false)">重置</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="12" :push="10">
            <el-form-item>
              <el-button
                type="primary"
                size="medium"
                plain
                @click="$refs.AddRole.dialogShow = true"
                >创建菜单</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 表格区域 -->
      <el-table border stripe style="width: 100%" :data="list">
        <el-table-column prop="id" label="角色id"> </el-table-column>
        <el-table-column prop="role_name" label="角色名称"> </el-table-column>
        <el-table-column prop="identify" label="角色标识"> </el-table-column>
        <el-table-column prop="description" label="角色描述"> </el-table-column>
        <el-table-column prop="created_at" label="添加时间"> </el-table-column>
        <el-table-column prop="prop" label="操作">
          <template slot-scope="{ row }">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              circle
              @click="edlFn(row.id)"
            ></el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              circle
              @click="delFn(row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :page-sizes="[10, 20, 30]"
        :page-size="fromData.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum"
        background
      >
      </el-pagination>
      <AddRole ref="AddRole" @updataList="initData"></AddRole>
    </div>
  </div>
</template>

<script>
import {
  getRoleApi,
  delRoleListApi,
  showRoleListApi,
} from "@/api/permission/role";
import AddRole from "./components/addRole";
export default {
  components: { AddRole },
  data() {
    return {
      fromData: {
        role_name: "",
        page: 1,
        limit: 10,
      },
      list: [],
      totalNum: 0,
    };
  },
  created() {
    this.initData();
  },
  methods: {
    async initData(flag ) {
      if (flag) {
        this.fromData.limit = 1;
        const res = await getRoleApi(
          this.fromData.role_name,
          this.fromData.page,
          this.fromData.limit
        );
        this.totalNum = res.total;
        this.list = res.list;
        this.fromData.limit = 10;
      } else {
        const res = await getRoleApi(
          this.fromData.role_name,
          this.fromData.page,
          this.fromData.limit
        );
        this.totalNum = res.total;
        this.list = res.list;
      }
    },
    // 定义一个递归方法，将最底层的子级找出来
    getDefaultCheck(node, arr) {
      // node是子级节点信息，arr是储存数组
      // 这里判断父子下面有没有子级了
      if (node.children && node.children.length) {
        // 如果有就拿来遍历，从新递归，直到最底的那层，
        node.children.forEach((val) => {
          this.getDefaultCheck(val, arr);
        });
      } else {
        // 如果没有就说明一级到底了，直接将id赋值
        return arr.push(node.id);
      }
    },
    // 回显
    async edlFn(id) {
      const res = await showRoleListApi(id);
      this.$refs.AddRole.fromData = res;
      this.$refs.AddRole.dialogShow = true;
      console.log(res.authlist);
      // 设置存放id的数组
      const menuSmallId = [];
      //  res.authLis是一级树头
      res.authlist.forEach((item) => {
        // 就一级里的子级，进行处理
        this.getDefaultCheck(item, menuSmallId);
      });
      console.log(menuSmallId);
      // 赋值给子组件里面
      this.$refs.AddRole.defaultCheckkeys = menuSmallId;
    },


    
    async delFn(id) {
      try {
        await this.$confirm("确定要删除吗");
      } catch (error) {
        return console.log(error);
      }
      await delRoleListApi(id);
      this.$message.success("删除成功");
      this.initData();
    },
    sizeChange(val) {
      console.log(val); //最新每页数量
      this.fromData.limit = val;
      this.initData();
    },
    currentChange(val) {
      console.log(val); //最新的页码值
      this.fromData.page = val;
      this.initData();
    },
  },
};
</script>

<style scoped>
</style>